import type { TFunction, i18n } from 'i18next';
import { METRO_STATUS } from '@/utils/constants';
import { getMetroCityList } from '@/servers/metro/city';
import PositionSelect from '@/pages/metro/station/components/PositionSelect';
import { Badge, FormInstance, Tag } from 'antd';
import { NavigateFunction } from 'react-router-dom';
import { getMetroLineList } from '@/servers/metro/line';
import { getMetroStationPage } from '@/servers/metro/station';

// 搜索数据
export const searchList = (t: TFunction, i18n: i18n): BaseSearchList[] => [
  {
    label: t('metro.cityName'),
    name: 'cityCode',
    component: 'ApiSelect',
    componentProps: {
      api: getMetroCityList,
      fieldNames: { label: i18n.language === 'zh' ? 'cityName' : 'citySpell', value: 'cityCode' },
    },
  },
  {
    label: t('metro.stationName'),
    name: 'stationName',
    component: 'Input',
  },
  {
    label: t('metro.stationStatus'),
    name: 'stationStatus',
    component: 'Select',
    componentProps: {
      options: METRO_STATUS(t),
    },
  },
];

/**
 * 表格数据
 * @param t
 * @param optionRender - 渲染操作函数
 * @param i18n
 * @param navigate
 */
export const tableColumns = (
  t: TFunction,
  optionRender: TableOptions<object>,
  i18n: i18n,
  navigate: NavigateFunction,
): TableColumn[] => {
  return [
    {
      title: t('metro.cityName'),
      dataIndex: i18n.language === 'zh' ? 'cityName' : 'citySpell',
    },
    {
      title: t('metro.stationName'),
      dataIndex: 'stationName',
    },
    {
      title: t('metro.stationEn'),
      dataIndex: 'stationEn',
    },
    {
      title: t('metro.stationLongitude'),
      dataIndex: 'stationLongitude',
    },
    {
      title: t('metro.stationLatitude'),
      dataIndex: 'stationLatitude',
    },
    {
      title: t('metro.enableDate'),
      dataIndex: 'enableDate',
    },
    {
      title: t('metro.stationStatus'),
      dataIndex: 'stationStatus',
      enum: METRO_STATUS(t),
      ellipsis: false,
    },
    {
      title: t('metro.stationLines'),
      dataIndex: 'transferLine',
      render: (
        value: {
          lineCode: string;
          lineShortName: string;
          lineColor: string;
        }[],
      ) =>
        value.length > 0 ? (
          <>
            {value.map((line) => (
              <Badge
                key={line.lineCode}
                count={line.lineShortName}
                showZero
                color={line.lineColor}
                onClick={() => navigate(`/metro/line/${line.lineCode}`)}
                className={'hover:cursor-pointer'}
              />
            ))}
          </>
        ) : undefined,
    },
    {
      title: t('public.operate'),
      dataIndex: 'operate',
      width: 150,
      fixed: 'right',
      render: (value: unknown, record: object) => optionRender(value, record),
    },
  ];
};

// 新增数据
export const createList = (
  t: TFunction,
  i18n: i18n,
  data: BaseFormData,
  id?: string,
  form?: FormInstance,
): BaseFormList[] => [
  {
    label: t('metro.cityCode'),
    name: 'cityCode',
    rules: FORM_REQUIRED,
    component: 'ApiSelect',
    componentProps: {
      api: getMetroCityList,
      fieldNames: { label: i18n.language === 'zh' ? 'cityName' : 'citySpell', value: 'cityCode' },
    },
  },
  {
    label: t('metro.stationName'),
    name: 'stationName',
    rules: FORM_REQUIRED,
    component: 'Input',
  },
  {
    label: t('metro.stationEn'),
    name: 'stationEn',
    component: 'Input',
  },
  {
    label: t('metro.stationPosition'),
    name: 'position',
    component: 'customize',
    render: (props) => {
      const station: [number, number] | undefined =
        data.stationLatitude && data.stationLongitude
          ? [Number(data.stationLongitude), Number(data.stationLatitude)]
          : undefined;
      return (
        <PositionSelect
          cityCode={data.cityCode as string}
          station={station}
          onSelectStation={(lonLat, name) => {
            form?.setFieldsValue({
              stationName: form.getFieldValue('stationName')
                ? form.getFieldValue('stationName')
                : name?.split('(')[0],
            });
            props.onChange(lonLat);
          }}
        />
      );
    },
  },
  {
    label: t('metro.enableDate'),
    name: 'enableDate',
    component: 'DatePicker',
  },
  {
    label: t('metro.stationStatus'),
    name: 'stationStatus',
    rules: FORM_REQUIRED,
    component: 'RadioGroup',
    componentProps: {
      options: METRO_STATUS(t),
    },
  },
  {
    label: t('metro.stationLines'),
    name: 'initialLine',
    hidden: !!id,
    component: 'ApiSelect',
    componentProps: {
      api: getMetroLineList as ApiFn,
      params: {
        cityCode: data.cityCode,
      },
      fieldNames: { label: 'lineName', value: 'id' },
      optionRender: (v) => (
        <>
          <Tag>{v.data.cityName}</Tag>
          {v.data.lineName}
        </>
      ),
    },
  },
  {
    label: t('metro.transferStation'),
    name: 'transferStation',
    component: 'ApiPageSelect',
    componentProps: {
      api: getMetroStationPage as ApiFn,
      apiResultKey: 'records',
      queryKey: 'stationName',
      fieldNames: { label: 'stationName', value: 'id' },
      filterOption: false,
      optionRender: (v) => (
        <>
          <Tag>{v.data.cityName}</Tag>
          {v.data.stationName}
          {v.data.stationEn && `(${v.data.stationEn})`}
        </>
      ),
      params: {
        page: 1,
        pageSize: 10,
      },
    },
  },
];
